import React from 'react';
import Grid from '@mui/material/Grid2';
import { useSelector, useDispatch } from 'react-redux';
import { useParams, useLocation } from 'react-router-dom'
import { Select } from 'antd';
import { Link } from 'react-router-dom'
import ToggleButton from '@mui/material/ToggleButton';
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
import { putJobCategory } from '../redux/reducers'
import { updateJobCategory } from '../redux/actions'
import { GROUP_HAS_TARGET, GROUP_FIRST_ROUND } from '../contants'

const { Option } = Select;

function JobDetail(props) {
  const dispatch = useDispatch()
  const jobDetail = useSelector(state => state.job.jobDetail)
  const dataList = useSelector(state => state.job.dataListFiltered)
  const params = useParams()
  const index = parseInt(params.index);
  const location = useLocation();

  const currentGroup = useSelector(state => state.job.group)
  const dataShow = useSelector(state => state.job.dataListFiltered.filter(item => {
    // console.log('+++', item['group'])
    return item['group'] == GROUP_FIRST_ROUND
  }))

  console.log(dataShow.map(item => item.brandName))

  const detailData = dataShow[index];
  const handleChange = (value) => {
    dispatch(putJobCategory({
      lid: detailData.lid,
      params: {
        category: value
      }
    }))
    window.electronAPI.updateJobCategory({
      lid: detailData.lid,
      params: {
        category: value
      }}, () => {})
  }

  const handleTargetChange = (e, value) => {
    dispatch(putJobCategory({
      lid: detailData.lid,
      params: {
        targetGroup: value,
        group: GROUP_HAS_TARGET
      }
    }))
    window.electronAPI.updateJobCategory({
      lid: detailData.lid,
      params: {
        targetGroup: value,
        group: GROUP_HAS_TARGET
      }
    }, () => {})
  }

  if (!detailData) {
    return null
  }

  return (
    <div>
      <div style={{
        height: '100px',
        lineHeight: '100px',
        background:'#3b526a',
        'font-size': '28px',
        'font-weight': 600,
        color: '#fff',
        paddingLeft: '30px'
      }}>{detailData.brandName} | { detailData.jobName} <span style={{color: '#f26d49'}}>{detailData && detailData.salaryDesc}</span></div>
      <div>{location.pathname}</div>
      <Grid container spacing={2}>
        <Grid size={9}>
          <div className="content" style={{ background: 'white', height: '480px', marginTop: '15px', borderRadius: 10, padding: "20px 30px" }}>
            <div style={{ paddingBottom: '20px', fontSize: '22px', fontWeight: 'bold' }}>职位描述：</div>
            { detailData && detailData['detail'] && <div>{detailData['detail'].split('\n').map((text) => <div>{text}</div>)}</div> }
          </div>
          <div className="bottom" style={{ background: 'white',  marginTop: '15px' }}>
            <Grid container style={{height: '100px',}}>
              <Grid size={6}>
                <Grid container>
                  <Grid size={4}>类目：</Grid>
                  <Grid size={8}>
                    <Select
                      value={detailData.category}
                      style={{ width: 120 }}
                      onChange={handleChange}
                    >
                      <Option value="女装">女装</Option>
                      <Option value="美妆">美妆</Option>
                      <Option value="护肤">护肤</Option>
                      <Option value="母婴">母婴</Option>
                      <Option value="个护">个护</Option>
                      <Option value="食品">食品</Option>
                      <Option value="二奢">二奢</Option>
                      <Option value="珠宝">珠宝</Option>
                      <Option value="大健康">大健康</Option>
                      <Option value="全品类">全品类</Option>
                      <Option value="其他">其他</Option>
                    </Select>
                  </Grid>
                </Grid>
                <Grid container>
                  <Grid size={4}>分类：</Grid>
                  <Grid size={8}>
                    <ToggleButtonGroup
                      color="primary"
                      value={detailData.targetGroup}
                      exclusive
                      onChange={handleTargetChange}
                      aria-label="Platform"
                    >
                      <ToggleButton value="女装类">女装类</ToggleButton>
                      <ToggleButton value="食品类">食品类</ToggleButton>
                      <ToggleButton value="厨卫类">厨卫类</ToggleButton>
                      <ToggleButton value="新尝试">新尝试</ToggleButton>
                    </ToggleButtonGroup>                   
                  </Grid>
                </Grid>

              </Grid>
              <Grid size={6}>
                <Link to={`/jobList/detail/${ index + 1}`} 
                style={{
                  display: 'block',
                  backgroundColor: '#00bebd', color: '#fff', height: '100%', position: 'relative',
                  fontSize: '40px',
                  fontWeight: 800,
                  textAlign: 'center',
                  height: '100px',
                  lineHeight: '100px',
                  cursor: 'pointer',
                  color: '#fff'
                }}>
                  下一个
                </Link>
              </Grid>
            </Grid>
          </div>
        </Grid>
        <Grid  size={3} style={{ background: 'white' }}>
   
        </Grid>
      </Grid>
    </div>
)

}

export default JobDetail
